<template>
	<view>
		<block v-if="isload">
			<view class="shopBox">
				<view class="shopBoxLeft">
					<image :src="shopImage"></image>
				</view>
				<view class="shopBoxRight">
					<view style="font-size:35rpx;letter-spacing:1px;">{{shopName}}</view>
					<view style="font-size:24rpx;">
						<text class="shopTips">门店</text>
						<text>{{shopName}}</text>
					</view>
				</view>
			</view>

			<view class="payInputBox">
				<view class="payInputTips">消费金额</view>
				<view class="payInput">
					<text>￥</text>
					<uni-easyinput :clearable="false" @input="inputChange" ConfirmType="done" maxlength="7"
						:inputBorder="false" :focus="true" :placeholderStyle="placeholderStyle" type="digit">
					</uni-easyinput>
				</view>
			</view>

			<view class="payBtn" @click="payBtn()" v-if="inputValue > 0">确 认 支 付</view>
			<view class="payBtnS" v-else>确 认 支 付</view>
			<loading v-if="loading"></loading>
		</block>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				titleTop: 24, //默认胶囊距离顶部高度
				titleHeight: 32, //默认胶囊总高度
				placeholderStyle: "font-size:35rpx", //input提示语文字大小
				loading: true,
				shopName: '门店名称', //默认门店名称
				shopImage: 'https://shop.jhwl.site/static/img/weixin.png', //默认门店图片
				inputValue: 0, //默认输入框值
				shopId: 0, //门店ID
				isload: false,
			}
		},
		methods: {
			//输入框触发事件
			inputChange(e) {
				this.inputValue = e;
			},

			//调用接口 查询是否重定向
			getdata() {
				var that = this;
				that.loading = true;
				app.get('ApiPeisong/my', {}, function(res) {
					if (res.status > -1) {
						that.getShopInfo();
					}
					that.loaded();
				});
			},

			//查询店铺信息
			getShopInfo() {
				let scene = decodeURIComponent(uni.getStorageSync('scanPayUrlData'));
				console.log(scene,'新用户登陆之后的参数')
				let data = {};
				let _this = this;
				if (scene.split("=")[0] == 'id') {
					data = {id: scene.split("=")[1]};
				} else if (scene.split("=")[0] == 'code_id') {
					data = {code_id: scene.split("=")[1]};
				}else if(scene.split("=")[0] == 'pay_id'){
					data = {id: scene.split("=")[1]};
				}
				console.log(data,'data数据');
				app.get('ApiStore/getpayinfo', data, function(res) {
					_this.loading = false;
					if (res.status == 0) {
						uni.showModal({
							title: "操作提示",
							showCancel: false,
							content: '商家信息不存在,请先申请商家,点击确定前往申请！',
							success: function(res) {
								if (res.confirm) {
									//打开一个新的页面,避免出现返回按钮
									uni.redirectTo({
										url: '../../pagesZ/CRM/MerchantCollection?codeId=' +scene.split("=")[1] + ''
									})
								}
							}
						})
					}else if(res.status == 1){
						uni.showModal({
							title: "操作提示",
							showCancel: false,
							content: '付款码已绑定成功,点击确认返回首页！',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../index/index'
									})
								}
							}
						})
					} else {
						_this.loaded();
						_this.shopName = res.name;
						_this.shopImage = res.logo;
						_this.shopId = res.bid;
					}
				});
			},

			//确认支付事件
			payBtn() {
				let _this = this;
				_this.loading = true;
				app.post('ApiStore/createOrder', {
					bid: this.shopId,
					amount: this.inputValue
				}, function(res) {
					_this.loading = false;
					uni.requestPayment({
						'timeStamp': res.data.timeStamp,
						'nonceStr': res.data.nonceStr,
						'package': res.data.package,
						'signType': 'MD5',
						'paySign': res.data.paySign,
						'success': function(res) {
							app.success('付款完成');
							wx.exitMiniProgram({
								success: function() {
									console.log('退出小程序成功');
								},
								fail: function(err) {
									console.log('退出小程序失败', err);
								}
							});
							app.goto('/pages/index/index');
						},
						'fail': function(res) {
							app.error('取消支付');
						}
					});
				});
			},
		},

		mounted() {
			this.titleTop = wx.getMenuButtonBoundingClientRect().top; //获取胶囊距离顶部高度
			this.titleHeight = wx.getMenuButtonBoundingClientRect().height; //获取胶囊总高度
		},

		onLoad(query) {
			let _this = this;
			const scene = decodeURIComponent(query.scene);
			const sceneQ = decodeURIComponent(query.q).split('?')[1];
			console.log(scene,'小程序');
			console.log(sceneQ,'二维码');
			if(scene == 'undefined' && sceneQ != undefined){
				uni.setStorageSync('scanPayUrlData', sceneQ); //缓存扫码支付URL参数,用于重定向之后
			}else if(scene != 'undefined'){
				uni.setStorageSync('scanPayUrlData', scene); //缓存扫码支付URL参数,用于重定向之后
			}
			this.getdata();
		}
	}
</script>

<style>
	.titleBox {
		width: 100%;
		float: left;
		background-color: #f3f3f3;
		color: #464646;
		letter-spacing: 1px;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		margin-bottom: 40rpx;
	}

	.titleTxt {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.shopBox {
		width: 90%;
		margin: 20rpx 5%;
		display: flex;
		align-items: center;
	}

	.shopBoxRight {
		margin-left: 25rpx;
	}

	.shopBoxRight view {
		line-height: 55rpx;
	}

	.shopBox image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.shopTips {
		color: #fff;
		background-color: #aaaaaa;
		padding: 3rpx 8rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
	}

	.payInputBox {
		width: 94%;
		margin-left: 3%;
		border-radius: 10rpx;
		float: left;
		background-color: #fff;
	}

	.payInputTips {
		font-weight: bold;
		width: 90%;
		float: left;
		padding: 25rpx 0 0 5%;
		font-size: 28rpx;
		letter-spacing: 1px;
	}

	.payInput {
		font-size: 30rpx;
		width: 90%;
		padding: 0 5% 10rpx 5%;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.payInput text {
		font-size: 80rpx;
		/* margin-right: 10rpx; */
	}

	.payInput input {
		font-size: 70rpx;
		height: 110rpx;
		line-height: 110rpx;
	}

	.payBtn {
		width: 90%;
		float: left;
		position: fixed;
		line-height: 90rpx;
		border-radius: 12rpx;
		left: 5%;
		bottom: 40rpx;
		background-color: #54c163;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
	}

	.payBtnS {
		width: 90%;
		float: left;
		position: fixed;
		line-height: 90rpx;
		border-radius: 12rpx;
		left: 5%;
		bottom: 40rpx;
		background-color: #8f8f8f;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
	}

	::v-deep .uni-easyinput__content-input {
		padding: 0;
	}
</style>